<template>
  <!--顶部搜索栏-->
  <div style="position: fixed; width: 100%; background-color: #fff">
    <div class="nav-top">
      <div class="btn-back" @click="navHome()">
        <van-icon name="cross" />
      </div>
      <div>当前城市-</div>
    </div>
    <van-search v-model="value" placeholder="请输入城市名或者拼音" />
  </div>
  <div class="city-box">
    <!--当前城市-->
    <div class="title-tip">GPS定位你所在的城市</div>
    <div class="city-item" v-if="hasGetCity">{{ currentCity }}</div>
    <div class="city-item" v-else>定位失败</div>
    <!--热点城市列表-->
    <div class="title-tip">热门城市</div>
    <div class="multi-box">
      <div v-for="(item, index) in hotCityList" :key="index">
        <div class="city-item" @click="navToIndex(item.name)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <!--城市列表-->
    <div v-for="(cityGroup, index) in cityList" :key="index">
      <div class="capital-label">{{ cityGroup.capital }}</div>
      <div
        v-for="(item, detailIndex) in cityGroup"
        :key="detailIndex"
        style="
          height: 34px;
          line-height: 34px;
          padding-left: 20px;
          box-sizing: border-box;
        "
        @click="navToIndex(item.name)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, onMounted, ref } from "vue";
import router from "../router/index";
import { useStore } from "vuex";
const store = useStore();
let cityList = reactive(new Array());
let hotCityList = reactive(new Array());
let hasGetCity = ref(store._state.data.canLocate);
let currentCity = store._state.data.canLocate
  ? store._state.data.userCity
  : ref("");
onMounted(async () => {
  //获取城市列表信息
  const tempData = await fetch("http://122.112.161.135:8000/city").then(
    (data) => data.json()
  );
  for (let item in tempData.data.cities) {
    tempData.data.cities[item].capital = item.toUpperCase();
    cityList.push(tempData.data.cities[item]);
  }
  for (let i = 0; i < tempData.data.hotCities.length; i++) {
    hotCityList.push(tempData.data.hotCities[i]);
  }
});
function navHome() {
  router.push("/");
}
function navToIndex(city) {
  store.commit("updateCity", city);
  router.push("/");
}
</script>
<style>
.nav-top {
  position: relative;
  display: flex;
  justify-content: center;
  height: 40px;
  line-height: 40px;
}
.btn-back {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.city-box {
  padding-top: 90px;
  padding-bottom: 60px;
}
.title-tip {
  color: #9ea0a3;
  font-size: 14px;
  padding: 5px 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.city-item {
  background-color: #f4f4f4;
  color: #404142;
  font-size: 12px;
  height: 34px;
  line-height: 34px;
  width: 80px;
  text-align: center;
  border-radius: 5px;
  margin-left: 20px;
  margin-bottom: 15px;
}
.multi-box {
  display: flex;
  flex-wrap: wrap;
}
.capital-label {
  background-color: #f4f4f4;
  height: 34px;
  line-height: 34px;
  padding-left: 20px;
  box-sizing: border-box;
}
</style>
